<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {

            /**
             * div跟随鼠标移动
             */
            var box1 =document.getElementById("box1")
            //绑定鼠标移动事件
            document.onmousemove = function (event){
               //兼容问题
                event = event || window.event;

                //获取鼠标位置
                /**
                 * clientX、clientY
                 * 鼠标相对于可见窗口坐标
                 * pageX、pageY
                 * 鼠标相对于当前页面的坐标
                 */
                // var left = event.pageX;
                // var top = event.pageY;

                var left = event.clientX;
                var top = event.clientY;

                //设置偏移量
                box1.style.left = left + "px";
                box1.style.top = top + "px";
            }
        }
    </script>

</head>
<body>

<div id="box1">

</div>
</body>
</html>

<style>
  #box1{
      width: 100px;
      height:100px;
      background-color: red;
      /**
       *设置偏移量必须开启绝对定位
       */
      position: absolute;
  }
  body{
      width: 1000px;
  }

</style>
